<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="客户价格" name="first">
            <el-row>
              <el-col :span="24">
                <div class="header">
                  <el-form
                    ref="khForm"
                    :model="khForm"
                    label-width="100px"
                    class="flex"
                  >
                    <el-form-item
                      label="所属网点"
                      style="margin-left: 10px"
                      prop="networkNameId"
                    >
                      <el-select
                        v-model="khForm.networkNameId"
                        placeholder="请选择网点"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in networkList"
                          :key="item.id"
                          :label="item.networkName"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="客户名称" prop="clientName">
                      <el-input
                        v-model="khForm.clientName"
                        placeholder="请输入客户名称"
                        style="width: 286px"
                      />
                    </el-form-item>
                    <el-form-item label="客户编号" prop="clientCode">
                      <el-input
                        v-model="khForm.clientCode"
                        placeholder="请输入报价编号"
                        style="width: 286px"
                      />
                    </el-form-item>
                    <el-form-item label="客户昵称" prop="nickName">
                      <el-input
                        v-model="khForm.nickName"
                        placeholder="请输入客户昵称"
                        style="width: 286px"
                      />
                    </el-form-item>
                    <el-form-item style="margin-left: 15px">
                      <el-button class="cx" @click="getKhList">查询</el-button>
                      <el-button class="cz" @click="khClear">重置</el-button>
                    </el-form-item>
                    <el-form-item
                      label="有效客户筛选"
                      style="margin-left: 10px"
                      prop="clientScreen"
                    >
                      <el-select
                        v-model="khForm.clientScreen"
                        placeholder="请选择有效客户筛"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="(item, index) in yxkhsx"
                          :key="index"
                          :label="item.label"
                          :value="item.label"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="父客户" prop="parentClientId">
                      <el-input
                        v-model="khForm.parentClientId"
                        placeholder="请输入父客户"
                        style="width: 286px"
                      />
                    </el-form-item>
                    <el-form-item label="客户类型" prop="clientType">
                      <el-select
                        v-model="khForm.clientType"
                        placeholder="请选择客户类型"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="(item, index) in khtype"
                          :key="index"
                          :label="item.label"
                          :value="item.label"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="所属对象" prop="objectName">
                      <el-input
                        v-model="khForm.objectName"
                        placeholder="请输入所属对象"
                        style="width: 286px"
                      />
                    </el-form-item>

                    <el-form-item
                      label="平台来源"
                      style="margin-left: 10px"
                      prop="clientSourceId"
                    >
                      <el-select
                        v-model="khForm.clientSourceId"
                        placeholder="请选择平台来源"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in PlatformAllList"
                          :key="item.id"
                          :label="item.platformSource"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="客户状态" prop="clientStatus">
                      <el-select
                        v-model="khForm.clientStatus"
                        placeholder="请选择客户状态"
                        style="width: 286px"
                      >
                        <el-option label="有效" value="有效" />
                        <el-option label="无效" value="无效" />
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="6">
                <div class="page">
                  当前页共<span>{{ khTable.length }}</span>项
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="24">
                <elltable
                  :loading="khloading"
                  :data="khTable"
                  :th="khth"
                  :n="3"
                >
                  <template v-slot:after-columns>
                    <el-table-column
                      v-if="khTable.length > 0"
                      label="操作"
                      width="120"
                      fixed="right"
                    >
                      <template slot-scope="scope">
                        <el-button
                          type="text"
                          size="small"
                          @click="edit(scope.row)"
                        >修改</el-button>
                      </template>
                    </el-table-column>
                  </template>
                </elltable>
              </el-col>
            </el-row>
            <div class="block" style="display: flex; justify-content: flex-end">
              <pagination
                :current-page="khForm.pageDate.pageNum"
                :page-size="khForm.pageDate.pageSize"
                :total="khTotal"
                @size-change="khHandleSizeChange"
                @current-change="khHandleCurrentChange"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="业务员价格" name="second">
            <el-row>
              <el-col :span="24">
                <div class="header">
                  <el-form
                    ref="ywyForm"
                    :model="ywyForm"
                    label-width="100px"
                    class="flex"
                  >
                    <el-form-item label="网点名称" prop="networkNameId">
                      <el-select
                        v-model="ywyForm.networkNameId"
                        placeholder="请选择网点名称"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in networkList"
                          :key="item.id"
                          :label="item.networkName"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>

                    <el-form-item label="业务员名称" prop="salesmanName">
                      <el-input
                        v-model="ywyForm.salesmanName"
                        placeholder="请输入业务员名称"
                        style="width: 286px"
                      />
                    </el-form-item>
                    <el-form-item label="业务员编号" prop="salesmanCode">
                      <el-input
                        v-model="ywyForm.salesmanCode"
                        placeholder="请输入业务员编号"
                        style="width: 286px"
                      />
                    </el-form-item>
                    <el-form-item label="业务员状态" prop="salesmanStatus">
                      <el-select
                        v-model="ywyForm.salesmanStatus"
                        placeholder="请选择业务员状态"
                        style="width: 286px"
                      >
                        <el-option label="有效" value="有效" />
                        <el-option label="无效" value="无效" />
                      </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 15px">
                      <el-button class="cx" @click="getYwyList">查询</el-button>
                      <el-button class="cz" @click="ywyClear">重置</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="6">
                <div class="page">
                  当前页共 <span>{{ ywyTable.length }}</span>项
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="24">
                <elltable
                  :loading="ywyloading"
                  :data="ywyTable"
                  :th="ywyth"
                  :n="2"
                >
                  <template v-slot:after-columns>
                    <el-table-column v-if="ywyTable.length > 0" label="操作">
                      <template slot-scope="scope">
                        <el-button
                          type="text"
                          size="small"
                          @click="editYwy(scope.row)"
                        >修改</el-button>
                      </template>
                    </el-table-column>
                  </template>
                </elltable>
              </el-col>
            </el-row>
            <div class="block" style="display: flex; justify-content: flex-end">
              <pagination
                :current-page="ywyForm.pageDate.pageNum"
                :page-size="ywyForm.pageDate.pageSize"
                :total="ywyTotal"
                @size-change="ywyHandleSizeChange"
                @current-change="ywyHandleCurrentChange"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="承包区价格" name="third">
            <el-row>
              <el-col :span="24">
                <div class="header">
                  <el-form
                    ref="cbqForm"
                    :model="cbqForm"
                    label-width="100px"
                    class="flex"
                  >
                    <el-form-item label="网点名称" prop="networkNameId">
                      <el-select
                        v-model="cbqForm.networkNameId"
                        placeholder="请选择网点名称"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in networkList"
                          :key="item.id"
                          :label="item.networkName"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="承包区名称" prop="contractName">
                      <el-input
                        v-model="cbqForm.contractName"
                        placeholder="请输入承包区名称"
                        style="width: 286px"
                      />
                    </el-form-item>
                    <el-form-item label="承包区编号" prop="contractCode">
                      <el-input
                        v-model="cbqForm.contractCode"
                        placeholder="请输入承包区编号"
                        style="width: 286px"
                      />
                    </el-form-item>
                    <el-form-item label="承包区状态" prop="contractStatus">
                      <el-select
                        v-model="cbqForm.contractStatus"
                        placeholder="请选择承包区状态"
                        style="width: 286px"
                      >
                        <el-option label="有效" value="有效" />
                        <el-option label="无效" value="无效" />
                      </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 15px">
                      <el-button class="cx" @click="getCbqList">查询</el-button>
                      <el-button class="cz" @click="cbqClear">重置</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="6">
                <div class="page">
                  当前页共 <span>{{ cbqTable.length }}</span>项
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="24">
                <elltable
                  :loading="cbqloading"
                  :data="cbqTable"
                  :th="cbqth"
                  :n="2"
                >
                  <template v-slot:after-columns>
                    <el-table-column v-if="cbqTable.length > 0" label="操作">
                      <template slot-scope="scope">
                        <el-button
                          type="text"
                          size="small"
                          @click="editCbq(scope.row)"
                        >修改</el-button>
                      </template>
                    </el-table-column>
                  </template>
                </elltable>
              </el-col>
            </el-row>
            <div class="block" style="display: flex; justify-content: flex-end">
              <pagination
                :current-page="cbqForm.pageDate.pageNum"
                :page-size="cbqForm.pageDate.pageSize"
                :total="cbqTotal"
                @size-change="cbqHandleSizeChange"
                @current-change="cbqHandleCurrentChange"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="兜底价格" name="fourth">
            <el-row>
              <el-col :span="24">
                <div class="header">
                  <el-form
                    ref="ddForm"
                    :model="ddForm"
                    label-width="100px"
                    class="flex"
                  >
                    <el-form-item label="网点名称" prop="networkNameId">
                      <el-select
                        v-model="ddForm.networkNameId"
                        placeholder="请选择网点名称"
                        style="width: 286px"
                      >
                        <el-option
                          v-for="item in networkList"
                          :key="item.id"
                          :label="item.networkName"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>

                    <el-form-item label="面单编号" prop="sheetCode">
                      <el-input
                        v-model="ddForm.sheetCode"
                        placeholder="请输入面单编号"
                        style="width: 286px"
                      />
                    </el-form-item>

                    <el-form-item label="面单名称" prop="sheetName">
                      <el-input
                        v-model="ddForm.sheetName"
                        placeholder="请输入面单名称"
                        style="width: 286px"
                      />
                    </el-form-item>

                    <el-form-item style="margin-left: 15px">
                      <el-button class="cx" @click="getDdList">查询</el-button>
                      <el-button class="cz" @click="ddClear">重置</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="6">
                <div class="page">
                  当前页共 <span>{{ ddTable.length }}</span>项
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="24">
                <elltable
                  :loading="ddloading"
                  :data="ddTable"
                  :th="ddth"
                  :n="2"
                >
                  <template v-slot:after-columns>
                    <el-table-column v-if="ddTable.length > 0" label="操作">
                      <template slot-scope="scope">
                        <el-button
                          type="text"
                          size="small"
                          @click="editDd(scope.row)"
                        >修改</el-button>
                      </template>
                    </el-table-column>
                  </template>
                </elltable>
              </el-col>
            </el-row>
            <div class="block" style="display: flex; justify-content: flex-end">
              <pagination
                :current-page="ddForm.pageDate.pageNum"
                :page-size="ddForm.pageDate.pageSize"
                :total="ddTotal"
                @size-change="ddHandleSizeChange"
                @current-change="ddHandleCurrentChange"
              />
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <el-dialog title="编辑" :visible.sync="dialogVisible" width="30%">
      <el-form
        v-if="activeName === 'first'"
        ref="editkhForm"
        :model="editkhForm"
        label-width="100px"
      >
        <el-form-item label="客户名称">
          <el-input v-model="editkhForm.clientName" disabled />
        </el-form-item>
        <el-form-item label="客户昵称">
          <el-input v-model="editkhForm.nickName" disabled />
        </el-form-item>
        <el-form-item label="客户编号">
          <el-input v-model="editkhForm.clientCode" disabled />
        </el-form-item>
        <el-form-item label="平台来源">
          <el-input v-model="editkhForm.clientSource" disabled />
        </el-form-item>
        <el-form-item label="结算方式">
          <el-select
            v-model="editkhForm.selletType"
            placeholder="请选择结算方式"
          >
            <el-option label="预付" value="预付" />
            <el-option label="月结" value="月结" />
          </el-select>
        </el-form-item>
        <el-form-item label="面单费(元)">
          <el-input
            v-model="editkhForm.sheetFee"
            type="number"
            placeholder="只能输入数字"
          />
        </el-form-item>
        <el-form-item label="日充值上限">
          <el-input
            v-model="editkhForm.fullLimit"
            type="number"
            placeholder="只能输入数字"
          />
        </el-form-item>
      </el-form>

      <!-- 业务员 -->
      <el-form
        v-if="activeName === 'second'"
        ref="editYwyForm"
        :model="editYwyForm"
        label-width="100px"
      >
        <el-form-item label="业务员名称">
          <el-input v-model="editYwyForm.salesmanName" disabled />
        </el-form-item>
        <el-form-item label="业务员编号">
          <el-input v-model="editYwyForm.salesmanCode" disabled />
        </el-form-item>
        <el-form-item label="面单费(元)">
          <el-input
            v-model="editYwyForm.sheetFee"
            type="number"
            placeholder="只能输入数字"
          />
        </el-form-item>
      </el-form>

      <!-- 承包区 -->
      <el-form
        v-if="activeName === 'third'"
        ref="editCbqForm"
        :model="editCbqForm"
        label-width="100px"
      >
        <el-form-item label="承包区名称">
          <el-input v-model="editCbqForm.contractName" disabled />
        </el-form-item>
        <el-form-item label="承包区编号">
          <el-input v-model="editCbqForm.contractCode" disabled />
        </el-form-item>
        <el-form-item label="面单费(元)">
          <el-input
            v-model="editCbqForm.sheetFee"
            type="number"
            placeholder="只能输入数字"
          />
        </el-form-item>
      </el-form>

      <!-- 兜底 -->
      <el-form
        v-if="activeName === 'fourth'"
        ref="editDdForm"
        :model="editDdForm"
        label-width="100px"
      >
        <el-form-item label="承包区名称">
          <el-input v-model="editDdForm.sheetName" disabled />
        </el-form-item>
        <el-form-item label="承包区编号">
          <el-input v-model="editDdForm.sheetCode" disabled />
        </el-form-item>
        <el-form-item label="面单费(元)">
          <el-input
            v-model="editDdForm.sheetFee"
            type="number"
            placeholder="只能输入数字"
          />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editTrue">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getOutletsList, getPlatformAll, clientSearch, updateKhSearch, salesmanTableSearch, updateSalesman, updateContract, contractTableSearch, updateUnderpay, underpayTableSearch } from '@/api/dashboard'
export default {
  data() {
    return {
      // 有效客户筛选
      yxkhsx: [
        {
          label: '近一个月内发货',
          value: 0
        }, {
          label: '近两个月内发货',
          value: 1
        }, {
          label: '近三个月内发货',
          value: 2
        }
      ],
      // 客户类型
      khtype: [
        {
          label: '本网点客户',
          value: 0
        }, {
          label: '业务员客户',
          value: 1
        }, {
          label: '虚拟承包区客户',
          value: 2
        }, {
          label: '承包区客户',
          value: 3
        }
      ],
      khloading: false,
      ywyloading: false,
      cbqloading: false,
      ddloading: false,
      dialogVisible: false,
      editkhForm: {
        fullLimit: '',
        sheetFee: '',
        selletType: ''
      },
      editYwyForm: {
        sheetFee: ''
      },
      editCbqForm: {
        sheetFee: ''
      },
      editDdForm: {
        sheetFee: ''
      },
      khForm: {
        clientCode: '',
        clientName: '',
        clientScreen: '',
        clientSourceId: '',
        clientStatus: '',
        clientType: '',
        networkNameId: '',
        nickName: '',
        objectName: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        parentClientId: ''
      },
      ywyForm: {
        networkNameId: '',
        salesmanName: '',
        salesmanCode: '',
        salesmanStatus: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }
      },
      cbqForm: {
        networkNameId: '',
        contractName: '',
        contractCode: '',
        contractStatus: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }
      },
      ddForm: {
        networkNameId: '',
        sheetName: '',
        sheetCode: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }
      },

      // 客户表格
      khTable: [],
      khth: [],

      // 业务员表格
      ywyTable: [],
      ywyth: [],

      // 承包区表格
      cbqTable: [],
      cbqth: [],

      // 兜底表格
      ddTable: [],
      ddth: [],

      khTotal: 0,
      ywyTotal: 0,
      ddTotal: 0,
      cbqTotal: 0,
      activeName: 'first',
      // 网点列表
      networkList: [],

      // 平台来源
      PlatformAllList: []
    }
  },
  created() {
    this.getOutLet()
    this.getPlatformList()
    // this.getKhList()
    // this.getYwyList()
    // this.getCbqList()
    // this.getDdList()
  },
  methods: {
    // 获取平台来源
    getPlatformList() {
      getPlatformAll().then((res) => {
        if (res.code === 200) {
          this.PlatformAllList = res.data
        }
      })
    },
    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code === 200) {
          this.networkList = res.data
        }
      })
    },
    // 搜索客户
    getKhList() {
      this.khloading = true
      clientSearch(this.khForm).then((res) => {
        console.log(res)
        if (res.code === 200) {
          this.khTable = res.data.list.data
          this.khth = res.data.fields
          this.khTotal = res.data.list.total
        } else {
          this.khTable = []
          this.khTotal = 0
        }
      })
      this.khloading = false
    },

    // 搜索业务员
    getYwyList() {
      this.ywyloading = true
      salesmanTableSearch(this.ywyForm).then((res) => {
        if (res.code === 200) {
          this.ywyTable = res.data.list.data
          this.ywyth = res.data.fields
          this.ywyTotal = res.data.list.total
        } else {
          this.ywyTable = []
          this.ywyTotal = 0
        }
      })
      this.ywyloading = false
    },

    // 搜索承包区
    getCbqList() {
      this.cbqloading = true
      contractTableSearch(this.cbqForm).then((res) => {
        if (res.code === 200) {
          this.cbqTable = res.data.list.data
          this.cbqth = res.data.fields
          this.cbqTotal = res.data.list.total
        } else {
          this.cbqTable = []
          this.cbqTotal = 0
        }
      })
      this.cbqloading = false
    },

    // 搜索兜底
    getDdList() {
      this.ddloading = true
      underpayTableSearch(this.ddForm).then((res) => {
        if (res.code === 200) {
          this.ddTable = res.data.list.data
          this.ddth = res.data.fields
          this.ddTotal = res.data.list.total
        } else {
          this.ddTable = []
          this.ddTotal = 0
        }
      })
      this.ddloading = false
    },
    // 修改客户
    edit(data) {
      this.editkhForm.clientName = data.clientName
      this.editkhForm.nickName = data.nickName
      this.editkhForm.clientCode = data.clientCode
      this.editkhForm.clientSource = data.clientSource.clientSource
      this.editkhForm.fullLimit = data.fullLimit
      this.editkhForm.sheetFee = data.sheetFee
      this.editkhForm.selletType = data.selletType
      this.editkhForm.id = data.id

      this.dialogVisible = true
    },

    // 确认修改
    editTrue() {
      if (this.activeName === 'first') {
        this.edidKhTrue()
      } else if (this.activeName === 'second') {
        this.editYwyTrue()
      } else if (this.activeName === 'third') {
        this.editCbqTrue()
      } else if (this.activeName === 'fourth') {
        this.editDdTrue()
      }
    },

    // 客户确认修改
    edidKhTrue() {
      const ff = {
        fullLimit: this.editkhForm.fullLimit,
        sheetFee: this.editkhForm.sheetFee,
        selletType: this.editkhForm.selletType,
        id: this.editkhForm.id
      }
      updateKhSearch(ff).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.dialogVisible = false
          this.showkhlist()
        }
      })
    },

    // 承包区修改
    editCbq(data) {
      console.log(data)
      this.editCbqForm.contractName = data.contractName
      this.editCbqForm.contractCode = data.contractCode
      this.editCbqForm.sheetFee = data.sheetFee
      this.editCbqForm.id = data.id
      this.dialogVisible = true
    },
    // 承包区确认修改
    editCbqTrue() {
      const ff = {
        contractName: this.editCbqForm.salesmanName,
        contractCode: this.editCbqForm.salesmanCode,
        sheetFee: this.editCbqForm.sheetFee,
        id: this.editCbqForm.id
      }
      updateContract(ff).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.dialogVisible = false
          this.getCbqList()
        }
      })
    },

    // 兜底修改
    editDd(data) {
      console.log(data)
      this.editDdForm.sheetName = data.sheetName
      this.editDdForm.sheetCode = data.sheetCode
      this.editDdForm.sheetFee = data.sheetFee
      this.editDdForm.id = data.id
      this.dialogVisible = true
    },

    // 兜底确认修改
    editDdTrue() {
      const ff = {
        sheetName: this.editDdForm.salesmanName,
        sheetCode: this.editDdForm.salesmanCode,
        sheetFee: this.editDdForm.sheetFee,
        id: this.editDdForm.id
      }
      updateUnderpay(ff).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.dialogVisible = false
          this.getDdList()
        }
      })
    },

    // 业务员修改
    editYwy(data) {
      console.log(data)
      this.editYwyForm.salesmanName = data.salesmanName
      this.editYwyForm.salesmanCode = data.salesmanCode
      this.editYwyForm.sheetFee = data.sheetFee
      this.editYwyForm.id = data.id
      this.dialogVisible = true
    },
    // 业务员确认修改
    editYwyTrue() {
      const ff = {
        salesmanName: this.editYwyForm.salesmanName,
        salesmanCode: this.editYwyForm.salesmanCode,
        sheetFee: this.editYwyForm.sheetFee,
        id: this.editYwyForm.id
      }
      updateSalesman(ff).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.dialogVisible = false
          this.getYwyList()
        }
      })
    },
    // 业务员
    ywyHandleSizeChange(val) {
      this.ywyForm.pageDate.pageSize = val
      this.ywyForm.pageDate.pageNum = 1
      this.getYwyList()
    },
    ywyHandleCurrentChange(val) {
      this.ywyForm.pageDate.pageNum = val
      this.getYwyList()
    },

    // 客户
    khHandleSizeChange(val) {
      this.khForm.pageDate.pageSize = val
      this.khForm.pageDate.pageNum = 1
      this.getKhList()
    },
    khHandleCurrentChange(val) {
      this.khForm.pageDate.pageNum = val
      this.getKhList()
    },
    // 承包区
    cbqHandleSizeChange(val) {
      this.cbqForm.pageDate.pageSize = val
      this.cbqForm.pageDate.pageNum = 1
      this.getCbqList()
    },
    cbqHandleCurrentChange(val) {
      this.cbqForm.pageDate.pageNum = val
      this.getCbqList()
    },

    // 兜底
    ddHandleSizeChange(val) {
      this.ddForm.pageDate.pageSize = val
      this.ddForm.pageDate.pageNum = 1
      this.getDdList()
    },
    ddHandleCurrentChange(val) {
      this.ddForm.pageDate.pageNum = val
      this.getDdList()
    },

    // 客户重置
    khClear() {
      this.$refs.khForm.resetFields()
    },

    // 业务员重置
    ywyClear() {
      this.$refs.ywyForm.resetFields()
    },
    // 承包区重置
    cbqClear() {
      this.$refs.cbqForm.resetFields()
    },
    // 兜底重置
    ddClear() {
      this.$refs.ddForm.resetFields()
    },

    handleClick(tab, event) {
      // console.log(tab, event)
      // if (tab.index === 0) {
      //   this.getKhList()
      // } else if (tab.index === 1) {
      //   this.getYwyList()
      // } else if (tab.index === 2) {
      //   this.getCbqList()
      // } else if (tab.index === 3) {

      //   this.getDdList()
      // }
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  padding: 0px 20px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.flex-bettom {
  display: flex;
  justify-content: space-between;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.cx {
  width: 80px;
  height: 42px;
  background: #2087d0;
  border-radius: 21px;
  color: #fff;
}
.cz {
  width: 80px;
  height: 42px;
  border-radius: 21px;
  border: 1px solid #666666;
  color: #333;
}
.page > span {
  color: #2087d0;
}

</style>
